import React, {Component} from 'react';
import './FirstStockholder.scss';
import DataBinder from '@icedesign/data-binder';
import initChart from '../../../utils/initChart';
import {getStockholderOption} from '../../../echarts-figures';

// import res from '../stockholder.json';
// console.log('----', res);
// const holder = data.data_list[0
const mapTds = (list) => {
  let holders = {
    FPSHName: [],
    InvolvedSum: [],
    PCTOfPledger: [],
    PCTOfTotalShares: [],
    InfoPublDate: []
  };
  if(!list) {
    return holders;
  }
  for(var i = 0 ; i < list.length; i++){
    for(let key in holders){ 
      if(holders.hasOwnProperty(key)) {
        holders[key].push(list[i][key] || '');
      }
    }
  }
  return holders;
}
@DataBinder({
  holders: {
    url: 'http://47.104.240.208/cattle/equity_pledge',
    type: 'get',
    params: {},
    defaultBindingData: {}
  },
})
export default class FirstStockholder extends Component{
  constructor(props) {
    super(props);
    this.state = {
      'hasData': false,
      rate: 0
    }
  }
  componentDidMount(){
    this.props.updateBindingData('holders',{
      params: {
        secu_code:GetUrlParam("secu_code"),
      }
    }, (res) => {
      if(res && res.flag){
        this.setState({
          'hasData': true,
          rate: res.data.total_stock_rate*100
        })
        let typeOptions = getStockholderOption(res.data.total_stock_rate);
        initChart(typeOptions, 'stockholderPieChart');
      }else {
        let typeOptions = getStockholderOption(0);
        initChart(typeOptions, 'stockholderPieChart');
      }
    });
  }
  render() {
    let {holders} = this.props.bindingData;
    const { is_exceed_msg, total_stock_rate} = holders;
    const {hasData} = this.state;
    
    holders = mapTds(holders.data_list || null);
    const tableWidth = (holders.FPSHName.length + 1 < 2 ? 2 : (holders.FPSHName.length + 1)) * 50;
    const names = holders.FPSHName.map((item, index)=>{
      return <td>{item}</td>
    });

    return (<div className="stockholder">
      {hasData && <div className="warning-tip">第一股东股权质押率<span className={is_exceed_msg === '超过'?'overload':''}>{is_exceed_msg}</span>持股比例50%</div>}
      <div className="stockholder-pie-wrapper">
        <div id="stockholderPieChart" style={{height: '346px', width: '100%'}}></div>
        {hasData && <div className="pie-chart-des">占总股本</div>}
        {!hasData && 
                  <div style={{
                    fontSize: '25px',
                    width:'100%',
                    height: '365px',
                    paddingTop:'160px',
                    // lineHeight: '500px',
                    textAlign: 'center',
                    color:'#151415'
                  }}>
                      <p style={{fontSize:'18px',fontWeight:'bold',color:'#cdcdcd'}}>没有相关数据</p>
                    </div>
                  
          }
      </div>
      {hasData &&
      <div className="holders-table">
      <table style={{width: tableWidth+'%'}}>
        <tbody>
          <tr><td width="50%">股东名称</td>
          {holders.FPSHName.map((item, index)=>{
            return <td width="50%" key={index}>{item}</td>
          })}
          </tr>

          <tr><td>最新质押股票数量(股)</td>
          {holders.InvolvedSum.map((item, index)=>(
            <td key={index}>{item}</td>
          ))}
          </tr>

          <tr><td>质押股权占质押方持股数比例(%)</td>
          {holders.PCTOfPledger.map((item, index)=>(
            <td key={index}>{item}%</td>
          ))}
          </tr>

          <tr><td>质押股权占总股本比例(%)</td>
          {holders.PCTOfTotalShares.map((item, index)=>(
            <td key={index}>{item}%</td>
          ))}
          </tr>

          <tr><td>质押公告日期</td>
          {holders.InfoPublDate.map((item, index)=>(
            <td key={index}>{item}</td>
          ))}
          </tr>
        </tbody>
      </table> 
      </div>}
    </div>);
  }
}